<template>

  <el-card style="box-shadow: none;">
    <div class="container" >

      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>

      <el-form @submit.prevent ref="inputForm" :inline="true" :model="inputForm" class="demo-form-inline" style="margin-left: 20px" >
        <el-row>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.clothingName" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">服</span><span style="transition-delay:150ms">饰</span><span style="transition-delay:200ms">名</span>
              </label>
            </div >
          </el-form-item>
          <el-form-item>
            <el-select v-model="inputForm.clothingValue" clearable placeholder="选择服饰类型" style="width: 200px;margin-top: 15px" @keyup.enter="searchDataList">
              <el-option
                  v-for="item in inputForm.clothingOptions"
                  :key="item.clothingValue"
                  :label="item.label"
                  :value="item.clothingValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="inputForm.genderValue" clearable placeholder="选择性別" style="width: 200px;margin-top: 15px" @keyup.enter="searchDataList">
              <el-option
                  v-for="item in inputForm.genderOptions"
                  :key="item.genderValue"
                  :label="item.label"
                  :value="item.genderValue">
              </el-option>
            </el-select>
          </el-form-item>
          <ul class="form-control" style="margin-left: -45px;margin-top: 20px">
            <li class="icon-content" >
              <form>
                <button
                    class="link"
                    data-social="inputDate"
                    type="button"
                    @click="searchDataList"
                >
                  <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1299" width="200" height="200">
                    <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                          fill="currentColor" p-id="1300"></path>
                  </svg>
                </button>
              </form>
            </li>
          </ul>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;margin-left: 2px;margin-top: 2px">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707923347791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="20537" width="27" height="27"><path d="M907.37 775.2a42.51 42.51 0 0 1-0.32-70l13.29-9.28-5.48-15.19A176.22 176.22 0 0 0 882 624.37l-10.45-12-14.44 6.74a42.48 42.48 0 0 1-60.34-34.59l-1.47-15.93-15.72-3a178.08 178.08 0 0 0-65.18 0l-15.72 3-1.48 15.93a42.47 42.47 0 0 1-60.33 34.59l-14.45-6.74-10.44 12A178.08 178.08 0 0 0 579 680.69l-5.49 15.19 13.3 9.28a42.53 42.53 0 0 1-0.32 70l-13.29 9.07 5.27 15.3a176.15 176.15 0 0 0 32.3 56.47l10.55 12.45 14.76-7.17a41.62 41.62 0 0 1 18.57-4.22 42.62 42.62 0 0 1 42.5 39.66l1.06 16.35 16.14 3a180.34 180.34 0 0 0 65 0l16.14-3 1-16.35A42.64 42.64 0 0 1 839 857.05a43.11 43.11 0 0 1 18.56 4.22l14.77 7.17L882.9 856a175.94 175.94 0 0 0 32.27-56.42l5.28-15.3z m-47.78 42.19a87.58 87.58 0 0 0-20.36-2.39 85 85 0 0 0-81.53 61.59 143 143 0 0 1-21.31 0A85 85 0 0 0 654.86 815a87.58 87.58 0 0 0-20.36 2.42 142.3 142.3 0 0 1-10.65-18.56 84.63 84.63 0 0 0 0.53-116.77 130.74 130.74 0 0 1 11.07-19 86 86 0 0 0 19.41 2.22 84.6 84.6 0 0 0 81-59.92 130 130 0 0 1 22.15 0A85.64 85.64 0 0 0 781.75 643a85.07 85.07 0 0 0 76.68 20 130.74 130.74 0 0 1 11.07 19 84.63 84.63 0 0 0 0.5 116.83 120.46 120.46 0 0 1-10.41 18.56z" p-id="20538" data-spm-anchor-id="a313x.search_index.0.i22.53db3a81SVKLza" class="selected" fill="#76cb02"></path><path d="M747.05 665.82a75.1 75.1 0 1 0 75.1 75.1 75.21 75.21 0 0 0-75.1-75.1z m0 107.9A32.91 32.91 0 1 1 780 740.81a32.94 32.94 0 0 1-32.95 32.91z" p-id="20539" data-spm-anchor-id="a313x.search_index.0.i23.53db3a81SVKLza" class="selected" fill="#76cb02"></path><path d="M516.06 821.73h-274c-13.79 0-25.44-14.25-25.44-31.11V233c0-16.86 11.65-31.1 25.44-31.1h510.08c13.79 0 25.44 14.24 25.44 31.1v276.53a30 30 0 1 0 60 0V233c0-50.23-38.33-91.1-85.44-91.1H242.08c-47.11 0-85.44 40.87-85.44 91.1v557.62c0 50.24 38.33 91.11 85.44 91.11h274a30 30 0 0 0 0-60z" p-id="20540"></path><path d="M290.47 348.22a32 32 0 1 0 64 0 32 32 0 1 0-64 0zM290.47 498.54a32 32 0 1 0 64 0 32 32 0 1 0-64 0zM290.47 644.86a32 32 0 1 0 64 0 32 32 0 1 0-64 0zM677.5 318.22H423.83a30 30 0 1 0 0 60H677.5a30 30 0 0 0 0-60z m0 150.32H423.83a30 30 0 0 0 0 60H677.5a30 30 0 1 0 0-60zM522 614.86h-98.17a30 30 0 0 0 0 60H522a30 30 0 0 0 0-60z" p-id="20541"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <div class="col-md-12">
          <div class="table-container">
            <!--2個按鈕-->
            <div style="margin-right: 15px">
              <ul class="example-1">
                <div style="margin-bottom: -28px">
                  <li class="icon-content" @click="addData">
                    <a
                        class="link"
                        data-social="addData"
                    >
                      <svg t="1707204592900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                           p-id="1347" width="200" height="200">
                        <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM512 320q17.664 0 30.176 12.512t12.512 30.176l0 128 128 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-128 0 0 128q0 17.664-12.512 30.176t-30.176 12.512-30.176-12.512-12.512-30.176l0-128-128 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512l128 0 0-128q0-17.664 12.512-30.176t30.176-12.512z"
                              fill="currentColor" p-id="1348"></path></svg>
                    </a>
                    <div class="addTip">新增虚拟服饰</div>
                  </li>
                </div>
                <div style="margin-bottom: -28px">
                  <li class="icon-content" @click="openWindow">
                    <a
                        class="link"
                        data-social="delData"
                    >
                      <svg t="1707204680847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                           p-id="1568" width="200" height="200">
                        <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM341.344 490.656l341.344 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-341.344 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512z"
                              fill="currentColor" p-id="1569"></path></svg>
                    </a>
                    <div class="delTip">批量删除</div>
                  </li>
                </div>
              </ul>
            </div>

            <!-- 清空选项 -->
            <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
              清空选项
            </el-button>
            <!-- 数据表单 -->
            <el-table :data="dataList"
                      style="width: 100%;margin-top: 10px"
                      ref="multipleTable"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection" align="center" class="tui-checkbox "/>
              <el-table-column fixed prop="clothingId" align="center" width="140px"/>
              <el-table-column label="服饰名称" prop="clothingName" align="center">
                <template #default="scope">
                  <el-input type="text" v-model="scope.row.clothingName" v-show="scope.row.iseditor" />
                  <span v-show="!scope.row.iseditor">{{scope.row.clothingName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="服饰类型" prop="type" align="center" >
                <template #default="scope">
                  <el-select v-model="scope.row.type" v-show="scope.row.iseditor" placeholder="" clearable>
                    <el-option
                        v-for="item in clothingOptions"
                        :key="item.clothingValue"
                        :label="item.label"
                        :value="item.clothingValue">
                    </el-option>
                  </el-select>
                  <div>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.type === 1">发型</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.type === 2">上衣</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.type === 3">下装</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.type === 4">鞋子</el-text>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="服饰性别" prop="gender" align="center">
                <template #default="scope">
                  <el-select v-model="scope.row.gender" v-show="scope.row.iseditor" placeholder="" clearable>
                    <el-option
                        v-for="item in genderOptions"
                        :key="item.genderValue"
                        :label="item.label"
                        :value="item.genderValue">
                    </el-option>
                  </el-select>
                  <div>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.gender === 0">未知</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.gender === 1">男</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.gender === 2">女</el-text>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="服饰图片" align="center">
                <template #default="scope">
                  <el-text class="mx-1" v-if="!scope.row.imageUrl&&!scope.row.iseditor"><el-tag type="danger">未上传</el-tag></el-text>
                  <el-button type="text" v-if="scope.row.imageUrl&&!scope.row.iseditor" @click="getClothingData(scope.row)" :class="['custom-button']">查看图片</el-button>
                  <el-upload
                      v-model="scope.row.imageUrl"
                      v-show="scope.row.iseditor"
                      class="avatar-uploader"
                      :action="'/api/clothingManage/updateClothingPic'"
                      :show-file-list="false"
                      :on-success="handleCommodityPicSuccess"
                      :before-upload="beforeCommodityPicUpload"
                      :data="{clothingId: scope.row.clothingId}">
                    <el-button type="text">上传图片</el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" width="120px">
                <template #default="scope">
                  <!--編輯用戶按鈕-->
                  <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                       viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;"
                       xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                       v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                    <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                  <!--保存信息按鈕-->
                  <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="6090"
                       v-if="scope.row.isEditor" @click="saves(scope.row)">
                    <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                  <!--刪除用戶按鈕-->
                  <el-popconfirm
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      icon-color="#F56C6C"
                      title="确定要删除该服饰吗?"
                      @confirm="deleteUser"
                      style="margin-left: 20px"
                  >
                    <template #reference>
                      <el-icon color="#409EFC" style="margin-top: 10px;margin-left:10px" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                        <svg data-toggle="tooltip" data-placement="bottom" title="Delete" version="1.1"
                             class="table-row__bin" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g>	<g>		<path d="M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30    c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512    h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30    C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408    c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z     M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g></g><g></g><g></g><g></g><g></g><g></g>
                          <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
                          </svg>
                      </el-icon>
                    </template>
                  </el-popconfirm>
                  <!--保留添加信息按鈕-->
                  <svg t="1707123601012" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1034" class="table-row__edit"
                       v-if="scope.row.isAdd" @click="saveAdd(scope.row)" >
                    <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                  <!--刪除添加按鈕 -->
                  <svg t="1707130365636" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="8127" width="15" height="15"
                       style="margin-top: 10px;margin-left:10px"
                       v-if="scope.row.isAdd" @click="del(scope.row)"><path d="M170.666667 42.666667l682.666667 0q52.992 0 90.496 37.504t37.504 90.496l0 682.666667q0 52.992-37.504 90.496t-90.496 37.504l-682.666667 0q-52.992 0-90.496-37.504t-37.504-90.496l0-682.666667q0-52.992 37.504-90.496t90.496-37.504zM853.333333 128l-682.666667 0q-17.664 0-30.165333 12.501333t-12.501333 30.165333l0 682.666667q0 17.664 12.501333 30.165333t30.165333 12.501333l682.666667 0q17.664 0 30.165333-12.501333t12.501333-30.165333l0-682.666667q0-17.664-12.501333-30.165333t-30.165333-12.501333zM632.661333 348.330667q17.664 0 30.336 12.672t12.672 30.336-12.672 30.336l-90.666667 90.325333 90.666667 90.325333q12.672 12.672 12.672 30.336t-12.672 30.165333-30.336 12.501333-29.994667-12.330667l-90.666667-90.666667-90.666667 90.666667q-11.989333 12.330667-29.994667 12.330667-18.346667 0-30.506667-12.16t-12.16-30.506667q0-18.005333 12.330667-30.336l90.666667-90.325333-90.666667-90.325333q-12.330667-12.330667-12.330667-30.336 0-17.664 12.501333-30.336t30.165333-12.672q18.005333 0 29.994667 12.672l90.666667 90.666667 90.666667-90.666667q12.672-12.672 29.994667-12.672z" fill="#F56C6C" p-id="8128"></path></svg>
                </template>
              </el-table-column>
              <template v-slot:empty>
                <el-empty image-size="80"></el-empty>
              </template>
            </el-table>
            <div class="block">
              <!-- 页号 -->
              <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                <el-pagination
                    v-model:current-page="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[5,10,15, 20]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalPage"
                    @size-change="sizeChangeHandle"
                    @current-change="CurrentChangeHandle"
                    style="margin-top: 30px"/>
              </el-config-provider>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>

  <!-- 确认删除弹窗 -->
  <div>
    <el-dialog
        v-model="delDialogVisible"
        title="提示"
        center
        width="25%"
        :custom-class="'rounded-dialog'"
    >
      <el-row>
        <svg t="1708610715791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin-top: 11px;margin-bottom: 10px;margin-left: 10px"
             p-id="6558" width="25" height="25"><path d="M512 147.2C310.528 147.2 147.2 310.528 147.2 512S310.528 876.8 512 876.8 876.8 713.472 876.8 512 713.472 147.2 512 147.2z m0 64c166.144 0 300.8 134.656 300.8 300.8S678.144 812.8 512 812.8 211.2 678.144 211.2 512 345.856 211.2 512 211.2z" fill="#FB553C" p-id="6559"></path><path d="M478.72 462.3104m33.28 0l0 0q33.28 0 33.28 33.28l0 173.056q0 33.28-33.28 33.28l0 0q-33.28 0-33.28-33.28l0-173.056q0-33.28 33.28-33.28Z" fill="#FB553C" p-id="6560"></path><path d="M512 370.7136m-48.64 0a48.64 48.64 0 1 0 97.28 0 48.64 48.64 0 1 0-97.28 0Z" fill="#FB553C" p-id="6561"></path></svg>
        <p class="mx-2" style="margin-left: 5px">此操作将永久删除该虚拟服饰, 是否继续?</p>
      </el-row>

      <template #footer>
                <span class="dialog-footer" >
                  <el-button type="primary"  style="margin-bottom: 10px" @click="deleteSelection">确定</el-button>
                  <el-button type="primary" plain style="margin-bottom: 10px" @click="this.delDialogVisible=false">取消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
  <!-- 服裝顯示 -->
  <div>
    <el-dialog
        v-model="clothingVisible"
        center
        width="30%"
    >
      <el-main>
        <div class="block">
          <el-image v-if="clothingRouter" :src="clothingRouter"></el-image>
        </div>
      </el-main>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";

export default{
  name: "clothesList",
  data() {
    return {
      // 页面展示的数据集合
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      multipleSelection: [],
      delData:{
        clothingId:0
      },
      delDialogVisible:false,  //批量删除用户彈窗
      // 搜索框内容
      inputForm:{
        clothingName: null,
        clothingOptions: [
          {clothingValue: 1, label: '发型'}, {clothingValue: 2, label: '上衣'},
          {clothingValue: 3, label: '下装'}, {clothingValue: 4, label: '鞋子'}],
        clothingValue:'',
        genderOptions: [
          {genderValue: 1, label: '男'}, {genderValue: 2, label: '女'}],
        genderValue:''
      },
      clothingVisible:false,
      clothingRouter:"",
      clothingOptions: [
        {clothingValue: 1, label: '发型'}, {clothingValue: 2, label: '上衣'},
        {clothingValue: 3, label: '下装'}, {clothingValue: 4, label: '鞋子'}],
      clothingValue:'',
      genderOptions: [
        {genderValue: 1, label: '男'}, {genderValue: 2, label: '女'}],
      genderValue:''
    }
  },
  methods: {
    rowClassName({ row }) {
      console.log("當前狀態", row.state)
      if(row.state === 1){
        return 'warning-row';
      }
      return '';
    },
    /*顯示所有數據*/
    // 改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.dataList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    /*表格數據顯示*/
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },
    //1.查询所有数据
    async getDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/clothingManage/getClothingList', pageInfo);

        if (res.status === 200) {
          this.dataList = res.data.data.list.map(item => {
            console.log("查詢數據",item.avatar);
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*查詢數據*/
    //0.定義查詢信息
    searchUserInfo(pageSize,pageNum,clothingName,type,gender){
      return {
        "pageSize": pageSize, "pageNum": pageNum, "clothingName":clothingName,"type":type,"gender":gender
      };
    },
    //1.查询数据
    async searchDataList() {
      console.log('查询数据:', this.inputForm);
      // 在此处添加你的搜索逻辑
      try {
        let clothingName = this.inputForm.clothingName;
        let type = this.inputForm.clothingValue;
        let gender = this.inputForm.genderValue;
        let searchData = this.searchUserInfo(this.pageSize, this.pageIndex, clothingName, type, gender);

        if (clothingName|| type || gender) {
          const res = await axios.post('/clothingManage/searchClothingList', searchData);
          console.log("查询数据返回值:",res.status);
          if (res.status === 200) {
            this.dataList = res.data.data.list.map(item => {
              let showEditor=true;
              let iseditor=false;
              return {
                ...item,
                showEditor,
                iseditor
              };
            });
            this.totalPage = res.data.data.total;
          } else {
            console.error('Error fetching data:', res.statusText);
            ElMessage('获取表单数据失败');
          }
        } else {
          //  ElMessage('请输入搜索条件');
          this.getDataList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        this.getDataList();
      }
    },

    /*新增服飾*/
    addData(){
      this.$router.push({path:'/clothesManagement/AddClothes'})
    },
    /*批量刪除*/
    //0.清空选项按钮
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //1.确认删除弹窗
    openWindow(){
      if(this.multipleSelection.length > 0 ){
        this.delDialogVisible = true;
      }else{
        ElMessage({
          showClose: true,
          message: '请先选择要删除的虚拟服饰',
          type: 'warning',
        })
      }
    },
    //2.批量删除
    async deleteSelection(){
      try {
        const res = await axios.post('/clothingManage/batchDeleteClothing',this.multipleSelection);

        if (res.status === 200) {
          ElMessage({
            message: '批量删除虚拟服饰信息成功',
            type: 'success',
          }),this.delDialogVisible=false,
              this.getDataList()
        }
        else{
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '删除虚拟服饰失败',
            type: 'error',
          }),
              this.getDataList()
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }

    },
    /* 删除用户*/
    //0.定義删除用户信息
    delDelInfo(clothingId){
      return {"clothingId": clothingId};
    },
    //1.获取该行数据
    getDelData(item){
      this.delData = {
        clothingId:item.clothingId
      }
      console.log('Button clicked for row:', this.delData.clothingId);
    },
    //2.删除用户
    async deleteUser(){
      const delInfo = this.delDelInfo(this.delData.clothingId);
      try {
        const res = await axios.post('/clothingManage/deleteClothing',delInfo);

        if (res.status === 200) {
          ElMessage({
            message: '删除成功',
            type: 'success',
          }),
              this.getDataList()
        }
        else{
          console.error('Error fetching data:', res.statusText);
          this.$message.error(res.data.msg);
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },

    /*編輯虚拟服饰*/
    //0.編輯按鈕
    edit(row) {
      row.iseditor = true;
      row.isEditor = true;
      row.showEditor = false;

    },
    //1.定義更新用户信息
    editClothingInfo(clothingId,clothingName,type,gender){
      return {
        "clothingId": clothingId, "clothingName": clothingName,"type":type,"gender": gender
      };
    },
    //2.保存修改
    async saves(row) {
      const editInfo = this.editClothingInfo(row.clothingId, row.clothingName, row.type, row.gender);
      try {
        console.log('获取editInfo数据:',editInfo);
        const res = await axios.post('/clothingManage/updateClothingList',editInfo);

        console.log('获取res数据:',res);
        if (res.data.code === 200) {
          ElMessage({
            message: '修改服饰信息成功',
            type: 'success',
          });
          this.getDataList();
        }if (res.data.code === 400) {
          this.$message.error(res.data);
          this.getDataList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
      row.iseditor = false;
      row.isEditor = false;
      row.showEditor = true;

    },
    del(row){
      row.iseditor = false;
      row.isAdd = false;
      row.showEditor = true;

      this.getDataList();

    },

    /*顯示服裝圖片*/
    async getClothingData(item){
    //  this.commodityId=item.commodityId;
      this.clothingVisible = true;

      const res = await axios.post('/clothingManage/findClothingPic/'+item.clothingId)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.clothingRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    //頭像上傳
    handleCommodityPicSuccess(res) {
      if (res && res.code === 200) {
        this.$message.success('上传成功');
      } else if (res && res.message) {
        this.$message.error(res.message);
      } else {
        this.$message.error('上传失败，未知错误');
      }
    },
    beforeCommodityPicUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; // 修改这一行
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); // 修改这一行
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M; // 修改这一行
    },


  },

  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
  },

  mounted() {
    this.getDataList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
//复选框样式
:deep .el-checkbox__inner{
  border-radius: 50%;
}
:deep .el-checkbox__inner::after {
  transform: translate(-50%, -50%) scale(1) !important;
  width: 4px;
  height: 4px;
  border-radius: 50% !important;
  background-color: var(--el-color-white);
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.15s ease-in;
}

</style>